import {Form,Table,Button,Progress,Modal,Alert,Icon,Row,Col,Card} from 'antd'
import {WeaTop,WeaInput4Wf} from 'weaCom'

const FormItem = Form.Item;

import * as API from '../api/util'

const columns = [{
	title: '名称',
	dataIndex: '',
	key: 'name',
	render(text,record,index) {
		return (
			<div>[{record.id}] {record.workflowname}</div>
		)
	}
}, {
	title: '浏览按钮',
	dataIndex: '',
	key: 'browser',
	render(text,record,index) {
		const {db_datashowset,xml_Browser} = record.counts;
		const count = parseInt(db_datashowset||0)+parseInt(xml_Browser||0);
		return (
			<div>{count}</div>
		)
	}
}, {
	title: 'SAP浏览按钮',
	dataIndex: '',
	key: 'sapbrowser',
	render(text,record,index) {
		const {db_intBrowserbaseInfo,xml_SapBrowser} = record.counts;
		const count = parseInt(db_intBrowserbaseInfo||0)+parseInt(xml_SapBrowser||0);
		return (
			<div>{count}</div>
		)
	}
}, {
	title: '节点后ACTION',
	dataIndex: '',
	key: 'action',
	render(text,record,index) {
		const {db_workflowactionset} = record.counts;
		const count = parseInt(db_workflowactionset||0);
		return (
			<div>{count}</div>
		)
	}
}];

class Main extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			data:{
				datas:[],
				details:[],
				loading:false,
				current:0,
				url:""
			}
		}
	}
	render() {
		let that = this;
		const {history} = this.props;
		const {getFieldValue,getFieldProps} = this.props.form;
		const {data,loading,current,url} = this.state; 
		const {datas,details} = data;
		return (
			<div className="wea-con" style={{background:"url('/cloudstore/app/no0000086/images/brillant.png') repeat scroll 0 0 transparent"}}>
				<div>
				<Form horizontal>
					<Row>
						<Col span={16} offset={1}>
							<FormItem wrapperCol={{ span:16, offset: 6 }}>
								<div style={{fontSize:22,fontWeight:600}}>流程跨环境导出</div>
							 </FormItem>
							<FormItem label="选择流程"
								labelCol={{ span: 6 }}
	          					wrapperCol={{ span: 6 }}
	          					required>
					          	<WeaInput4Wf isMult={true} style={{width:"100%"}} 
					          		{...getFieldProps('wfId',
					          			{
					          				initialValue:"",
					          				getValueFromEvent:(value,valueSpan)=>{that.doExportCheck(value);return value;}
					          			})
					          		} />
					        </FormItem>
					        <FormItem label="已选清单"
								labelCol={{ span: 6 }}
	          					wrapperCol={{ span: 16 }}>
								<Table dataSource={details} columns={columns} size="small" />
	          				</FormItem>
					        <FormItem wrapperCol={{ span:16, offset: 6 }} style={{ marginTop: 24 }}>
					        	<div>
					        		<Button type="primary" disabled={!getFieldValue("wfId")} 
					        			onClick={this.doExport.bind(this)} loading={loading}>导出</Button>
					        		<Button type="ghost" style={{marginLeft:15}} onClick={()=>{history.pushState(null,"/");}}>返回</Button>
					        	</div>
					        </FormItem>
					        <FormItem wrapperCol={{ span:10, offset: 6 }} style={{ marginTop: 24 }}>
					        	<Progress percent={current} />
					        </FormItem>
					        {url && 
					        <FormItem wrapperCol={{ span:16, offset: 6 }} style={{ marginTop: 24 }}>
					        	<Alert
								    message="成功导出"
								    description={
								    	<a className="ant-form-text" href={url} target="_blank">点击下载</a>
								    }
								    type="success"
								    showIcon
								  />
					        	
					        </FormItem>}
					        <FormItem wrapperCol={{ span:16, offset: 6 }} style={{ marginTop: 24 }}>
					        	<Alert
								    message="说明"
								    description={
								    	<div>
								    	<p>1、此程序用于流程本环境导出，并在其他环境导入</p>
								    	<p>2、除了导出【流程】，此程序还将导出【浏览按钮】、【SAP浏览按钮】、【节点后ACTION】</p>
								    	</div>
								    }
								    type="info"
								    showIcon
								  />
					        </FormItem>
						</Col>
					</Row>
				</Form>
				</div>
			</div>
		)
	}
	doExportCheck(value) {
		let that = this;
		API.doExportCheck({wfId:value}).then((data)=>{
			console.log("data:",data);
			that.setState({
				data:data
			});
		});
	}
	doExport() {
		const {getFieldValue} = this.props.form;
		let that = this;
		this.setState({
			loading:true,
			current:0,
			url:""
		});

		let current = 0;
		let run = setInterval(()=>{
			if(current==100) current = 99;
			that.setState({
				current:current++
			});
		},100);
		// setTimeout(()=>{
		// 	that.setState({
		// 		current:100,
		// 		loading:false
		// 	});
		// 	window.clearInterval(run);
		// },10000);
		const wfId = getFieldValue("wfId");
		API.doExport({wfId:wfId}).then((msg)=>{
			console.log("msg:",msg);
			setTimeout(()=>{
				that.setState({
					loading:false,
					current:100,
					url:msg.url
				});
				window.clearInterval(run);;
				that.doExportCheck(wfId);
			},3000);
		});
	}
}

Main = Form.create()(Main);

export default Main

//<Button type="ghost" style={{marginLeft:15}}>日志</Button>